var React = require('react');
var _ = require('underscore');
require('./table.scss');
var GoMeTable = React.createClass({
    renderHtml(){
        var { children, data} = this.props;
        var tableHtml = {tableHeader:[],tableBody:[]};
        /*ɸѡrowHeader��row*/
        var rowHead = _.filter(children,function(obj) {
            return ( obj.props.rowHeader )
        });
        children = _.filter(children,function(obj) {
            return ( !obj.props.rowHeader )
        });
        /*tableͷ*/
        tableHtml.tableHeader.push(
            <tr key={_.uniqueId('thtr_')}>
                {children.map((column)=> {
                    var { header, onHeaderChange, data ,thColRow={}} = column.props;
                    var Header = header;
                    var {col=1,row=1} = thColRow;
                    return (
                        <th key={_.uniqueId('th_')} colSpan={col} rowSpan={row}>
                            {React.isValidElement(Header)?
                                header:<Header onChange={onHeaderChange} data={data}/>
                            }
                        </th>
                    );
                })}
            </tr>
        );
        /*tableBody*/
        {data && data.map((item,rowIndex) => {
            var flag = !(rowIndex % 2 === 0);
            if(rowHead[0] && rowHead[0].props.children){//�����rowHeader��ȾrowHeader
                var rowHeadChild = rowHead[0].props.children;
                tableHtml.tableBody.push(
                    <tr className="row-margin" key={_.uniqueId('rh_margin')}>
                        <td colSpan="100"></td>
                    </tr>
                );
                tableHtml.tableBody.push(
                    <tr className="rowHeader" key={_.uniqueId('rh_')}>
                        {rowHeadChild.map((column, index)=> {
                                var { cell, colKey, onClick,className, onCellChange,colSpan, ...others } = column.props;
                                var Cell = cell;
                                if (Cell) {
                                    return (
                                        <td key={_.uniqueId('tdrow_')} colSpan={colSpan}>
                                            <Cell
                                                {...others} data={item} onClick={onClick} colKey={colKey} index={rowIndex}
                                                            onChange={(event) => {onCellChange(event, item,rowIndex);}} />
                                        </td>);
                                }
                                if (colKey == 'INDEX') {
                                    return (<td key={_.uniqueId('tdrow_')} colSpan={colSpan}><span className={className?className:''}>{index + 1}</span></td>);
                                }
                                return (<td key={_.uniqueId('tdrow_')} colSpan={colSpan}><span className={className?className:''}>{item[colKey]}</span></td>);
                            }
                        )}
                    </tr>
                )
            }
            tableHtml.tableBody.push(
                <tr key={_.uniqueId('tr_')} className={flag ? "shadow" : ""}>
                    {children.map((column, index)=> {
                            var { cell, colKey, onClick,className, onCellChange,tdColRow={},...others } = column.props;
                            var Cell = cell;
                            var {col=1,row=1} = tdColRow;
                            return (
                                <td key={_.uniqueId('td_')} colSpan={col} rowSpan={row}>
                                    {Cell?
                                        <Cell
                                            {...others} data={item} onClick={onClick} colKey={colKey} index={rowIndex}
                                                        onChange={(event) => {onCellChange(event, item,rowIndex);}} />:
                                        colKey == 'INDEX'?
                                            <span className={className?className:''}>{rowIndex + 1}</span>:
                                            <span className={className?className:''}>{item[colKey]}</span>
                                    }
                                </td>
                            );
                            /*if (colKey == 'INDEX') {
                             return (<td key={_.uniqueId('td_')} colSpan={col} rowSpan={row}><span className={className?className:''}>{rowIndex + 1}</span></td>);
                             }
                             return (<td key={_.uniqueId('td_')} colSpan={col} rowSpan={row}><span className={className?className:''}>{item[colKey]}</span></td>);*/
                        }
                    )}
                </tr>
            );
        })}
        return tableHtml;
    },
    render() {
        var {className} = this.props;
        var tableHtml = this.renderHtml();
        return (<div className="gome-table-mod">
            <table className={className}>
                <thead>
                {tableHtml.tableHeader}
                </thead>
                <tbody>
                {tableHtml.tableBody}
                </tbody>
            </table>
        </div>);
    }
});

GoMeTable.Column = React.createClass({
    propTypes: {
        header: React.PropTypes.any,
        colKey: React.PropTypes.string,
        onHeaderChange: React.PropTypes.func,
        onCellChange: React.PropTypes.func,
        data: React.PropTypes.any,
    },
    render() {
        return null;
    }
});

module.exports = GoMeTable;